import {Card } from "antd";
export interface TechAdvantageInfo{
    theme:string
    iconClass:string,
    title:string,
    description:string
}
export default function TechnicalAdvantages ({data}:{data:TechAdvantageInfo[]}) {
    return (
        <div id="part-3" className="w-full flex flex-col justify-center items-center py-[100px] ">
            <p className="text-[25px]">技术优势</p>
            <div className="w-[800px] flex gap-8 flex-wrap mt-10">
                {data.map((item,index)=>{
                    return (
                        <Card
                            className="hover:shadow-lg transition duration-500 ease-in-out p-5"
                            key={index}
                            cover={<i className={"iconfont mr-5 text-[#f8d435] "+item.iconClass} style={{width:"70px", fontSize: '70px',margin:"0 auto"}}></i>}
                        >
                                <Card.Meta className="text-center" title={item.title} description={item.description} style={{width:"280px"}}/>
                        </Card>
                    )
                })}
            </div>
        </div>
    )
}